<template>
    <div class="manage-check">
      <div class="title-con">
        <div class="title">{{$t('settlementDetail.tip1')}}</div>
        <div class="settlement-instructions">
          <el-tooltip class="item" effect="dark" placement="right">
            <div slot="content" class="title-con-pit">
              <p>{{$t('settlementDetail.tip2_2')}}</p>
              <p>&nbsp;</p>
              <p>{{$t('settlementDetail.tip2_3')}}</p>
              <p>{{$t('settlementDetail.tip2_4')}}</p>
              <p>{{$t('settlementDetail.tip2_5')}}</p>
              <p>{{$t('settlementDetail.tip2_6')}}</p>
              <p>{{$t('settlementDetail.tip2_7')}}</p>
              <p>{{$t('settlementDetail.tip2_8')}}</p>
              <p>{{$t('settlementDetail.tip2_9')}}</p>
              <p>&nbsp;&nbsp;&nbsp;{{$t('settlementDetail.tip2_10')}}</p>
              <p>&nbsp;&nbsp;&nbsp;{{$t('settlementDetail.tip2_11')}}</p>
              <p>{{$t('settlementDetail.tip2_12')}}</p>
              <p>&nbsp;&nbsp;&nbsp;{{$t('settlementDetail.tip2_13')}}</p>
              <p>{{$t('settlementDetail.tip2_14')}}</p>
              <p>&nbsp;&nbsp;&nbsp;{{$t('settlementDetail.tip2_15')}}</p>
              <p>&nbsp;&nbsp;&nbsp;{{$t('settlementDetail.tip2_16')}}</p>
              <p>{{$t('settlementDetail.tip2_17')}}</p>
              <p>{{$t('settlementDetail.tip2_18')}}</p>
              <p>&nbsp;&nbsp;&nbsp;{{$t('settlementDetail.tip2_19')}}</p>
              <p>{{$t('settlementDetail.tip2_20')}}</p>
              <p>{{$t('settlementDetail.tip2_21')}}</p>
              <p>{{$t('settlementDetail.tip2_22')}}</p>
              <p>{{$t('settlementDetail.tip2_23')}}</p>
              <p>{{$t('settlementDetail.tip2_24')}}</p>
              <p>{{$t('settlementDetail.tip2_25')}}</p>
              <p>{{$t('settlementDetail.tip2_26')}}</p>
              <p>{{$t('settlementDetail.tip2_27')}}</p>
              <p>{{$t('settlementDetail.tip2_28')}}</p>
              <p>{{$t('settlementDetail.tip2_29')}}</p>
              <p>{{$t('settlementDetail.tip2_30')}}</p>
            </div>
            <span style="font-size:14px;color:#155BD4;cursor:pointer;">{{$t('settlementDetail.tip27')}}<i class="el-icon-question" /></span>
          </el-tooltip>
        </div>
      </div>
      <div class="main-container" v-if="amountType !== 4">
        <div class="table-con">
          <el-table
            :data="data.tableData"
            row-key="id"
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            header-cell-class-name="table-header"
            row-class-name="table-row-low"
            style="width: 100%"
          >
            <el-table-column
              fixed
              prop="shopName"
              :label="this.$i18n.t('shopProcess.shopName')"
              width="150"
            >
              <template slot-scope="scope">
                <span class="table-cell-text">{{scope.row.shopName}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="prodName"
              :label="this.$i18n.t('product.prodName')"
              width="130"
            >
              <template slot-scope="scope">
                <span class="table-cell-text">{{scope.row.prodName}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="categoryName"
              :label="this.$i18n.t('publics.category')"
              width="130"
            />

            <el-table-column
              prop="prodTotalAmount"
              :label="this.$i18n.t('settlementDetail.prodTotalAmount')"
              width="130"
            >
              <template slot-scope="scope">
                <span>￥ {{ scope.row.productTotalAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="actualTotal"
              :label="this.$i18n.t('chat.userPaymentAmount')"
              width="130"
            >
              <template slot-scope="scope">
                <span>￥ {{ scope.row.actualTotal }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="multishopReduce"
              :label="this.$i18n.t('settlementDetail.multishopReduce')"
              width="130"
            >
              <template slot-scope="scope">
                <span>￥ {{ scope.row.multishopReduce }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="platformShareReduce"
              :label="this.$i18n.t('settlementDetail.platformShareReduce')"
              width="130"
            >
              <template slot-scope="scope">
                <span>￥ {{ scope.row.platformShareReduce }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="distributionAmount"
              :label="this.$i18n.t('settlementDetail.distributionAmount')"
              width="130"
            >
              <template slot-scope="scope">
                <span>￥ {{ scope.row.distributionAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="rate"
              :label="this.$i18n.t('settlementDetail.rate')"
              width="130"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.rate }}%</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="platformCommission"
              :label="this.$i18n.t('shopWallet.platformCommission')"
              width="130"
            >
              <template slot-scope="scope">
                <span>￥ {{ scope.row.platformCommission }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="memberAmount"
              :label="this.$i18n.t('settlementDetail.memberAmount')"
              width="130"
            >
              <template slot-scope="scope">
                <span>￥ {{ scope.row.memberAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="platformCouponAmount"
              :label="this.$i18n.t('settlementDetail.platformCouponAmount')"
              width="160"
            >
              <template slot-scope="scope">
                <span>￥ {{ scope.row.platformCouponAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="shopCouponAmount"
              :label="this.$i18n.t('settlementDetail.shopCouponAmount')"
              width="160"
            >
              <template slot-scope="scope">
                <span>￥ {{ scope.row.shopCouponAmount }}</span>
              </template>
            </el-table-column>
             <el-table-column
              prop="seckillAmount"
              :label="this.$i18n.t('settlementDetail.seckillAmount')"
              width="130"
            >
              <template slot-scope="scope">
                <span>￥ {{ scope.row.seckillAmount }}</span>
              </template>
            </el-table-column>
             <el-table-column
              prop="groupAmount"
              :label="this.$i18n.t('settlementDetail.groupAmount')"
              width="130"
            >
              <template slot-scope="scope">
                <span>￥ {{ scope.row.groupAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="shopChangeFreeAmount"
              :label="this.$i18n.t('settlementDetail.shopChangeFreeAmount')"
              width="130"
            >
              <template slot-scope="scope">
                <span>￥ {{ scope.row.shopChangeFreeAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column
            prop="platformShopChangeAmount"
            :label="this.$i18n.t('settlementDetail.platformShopChangeAmount')"
            width="140"
            align="center"
          >
            <template slot-scope="scope">
              <span>￥ {{ scope.row.platformShopChangeAmount }}</span>
            </template>
          </el-table-column>
            <el-table-column
              prop="refundAmount"
              :label="this.$i18n.t('settlementDetail.refundAmount')"
              width="130"
            >
              <template slot-scope="scope">
                <span>￥ {{ scope.row.refundAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="refundCount"
              :label="this.$i18n.t('settlementDetail.refundCount')"
              width="130"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.refundCount || 0 }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="message" v-if="data.freightAmount !== 0">
          <span>{{$t('publics.freight')}}：{{ data.freightAmount  }} {{$t('transport.yuan')}}</span>
        </div>
        <div v-if="data.freeFreightAmount !== 0" class="message">
          <span>{{$t('settlementDetail.freeFreightAmount')}}：{{ data.freeFreightAmount > 0 ? '+':'' }}{{ data.freeFreightAmount  }}  {{$t('transport.yuan')}}
            <el-tooltip class="item" effect="dark" :content="this.$i18n.t('settlementDetail.freeFreightAmountTips')" placement="top">
              <span style="font-size:14px;color:#46a6ff;cursor:pointer;"><i class="el-icon-question" /></span>
            </el-tooltip>
          </span>
        </div>
        <div v-if="data.platformFreeFreightAmount !== 0" class="message">
          <span>{{$t('settlementDetail.platformFreeFreightAmount')}}：{{ data.platformFreeFreightAmount  }} {{$t('transport.yuan')}}
            <el-tooltip class="item" effect="dark" :content="this.$i18n.t('settlementDetail.platformFreeFreightAmountTips')" placement="top">
              <span style="font-size:14px;color:#46a6ff;cursor:pointer;"><i class="el-icon-question" /></span>
            </el-tooltip>
          </span>
        </div>
        <div class="back">
          <div class="default-btn" @click="back">{{$t('shopFeature.edit.back')}}</div>
        </div>
      </div>
      <div class="main-container" v-else>
        <div class="table-con">
          <el-table
            :data="data"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            header-cell-class-name="table-header"
            row-class-name="table-row"
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
            <el-table-column
              prop="shopName"
              :label="this.$i18n.t('shopProcess.shopName')"
              min-width="130"
              align="center"
            />
            <el-table-column
              prop="prodName"
              :label="this.$i18n.t('product.prodName')"
              min-width="130"
              align="center"
            />
            <el-table-column
              prop="categoryName"
              :label="this.$i18n.t('publics.category')"
              width="130"
              align="center"
            />

            <el-table-column
              prop="total"
              :label="this.$i18n.t('settlementDetail.prodTotalAmount')"
              width="130"
              align="center"
            >
              <template slot-scope="scope">
                <span>￥ {{ scope.row.total }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="actualTotal"
              :label="this.$i18n.t('order.userPayunt')"
              width="130"
              align="center"
            >
              <template slot-scope="scope">
                <span>￥ {{ scope.row.actualTotal || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="changeFreeAmount"
              :label="this.$i18n.t('settlementDetail.shopChangeFreeAmount')"
              width="130"
              align="center"
            >
              <template slot-scope="scope">
                <span>￥ {{ scope.row.changeFreeAmount || 0 }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="message" v-if="refundSn">
          <span>{{$t('order.typeOfRefund')}}：{{[$t('order.onlyRefund'),$t('order.refunds')][refundData.chargebackType]}}</span>
        </div>
        <div class="message" v-if="refundSn">
          <span>{{$t('order.refundInstructions')}}：{{refundData.chargebackExplain}}</span>
        </div>
        <div class="message" v-if="refundSn">
          <span>{{$t('order.reasonForReturn')}}：{{causeOptions[refundData.cause]}}</span>
        </div>
        <div class="message" v-if="refundSn">
          <span>{{$t('order.returnAmount')}}：￥{{refundData.total}}</span>
        </div>
        <div class="back">
          <div class="default-btn" @click="back">{{$t('shopFeature.edit.back')}}</div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      time: '',
      activeName: 'first',
      total: 0,
      orderNumber: this.$route.query.orderNumber,
      path: this.$route.query.path,
      refundSn: this.$route.query.refundSn || '',
      amountType: Number(this.$route.query.amountType),
      params: {
        pageNum: 1,
        pageSize: 10
      },
      data: {
        freightAmount: 0,
        tableData: []
      },
      refundData: {},
      // 退款原因
      causeOptions: [
        this.$t('valetOrder.wrongShot'),
        this.$t('valetOrder.refundConsensus'),
        this.$t('valetOrder.damagedGoods'),
        this.$t('valetOrder.productNot'),
        this.$t('valetOrder.sellerSendsWrong'),
        this.$t('valetOrder.qualityProblem'),
        this.$t('valetOrder.other')
      ]
    }
  },

  mounted () {
    this.getData(this.orderNumber, this.refundSn)
  },

  methods: {
    handleClick (tab) {
      console.log(tab.name)
    },
    // 获取订单详情
    getData (orderNumber, refundSn) {
      let url = ''
      let params = {}
      if (this.amountType === 4) {
        url = '/platform/valetOrder/getByOrderNumber/' + orderNumber
      } else {
        url = '/platform/order_item/get_order_detail'
        params = { orderNumber, refundSn }
      }
      this.$http({
        url: this.$http.adornUrl(url),
        method: 'get',
        params: this.$http.adornParams(params)
      }).then(({data}) => {
        if (this.amountType !== 4) {
          this.data.freightAmount = data.freightAmount
          this.data.freeFreightAmount = data.freeFreightAmount ? data.freeFreightAmount : 0
          this.data.platformFreeFreightAmount = data.platformFreeFreightAmount ? data.platformFreeFreightAmount : 0
          this.data.tableData = data.orderItemDetailList
        } else {
          this.data = data
          this.getRefundDetail(refundSn)
        }
      })
    },
    getRefundDetail (refundSn) {
      this.$http({
        url: this.$http.adornUrl('/platform/valetChargeback/info/' + refundSn),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        this.refundData = data
      })
    },
    back () {
      // if (Number(this.path) === 0) {
      //   this.$router.push('/finance-walletLog/index?load=1')
      // } else {
      //   this.$router.push('/finance-merchant-balance/index?load=1')
      // }
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
 .manage-check {
   .title-con {
      display: flex;
      justify-content: space-between;
    .title {
      font-size: 16px;
      font-weight: bold;
    }
    .settlement-instructions {
      color: #155bd4;
    }
   }
   .search {
     background: #F5F5F5;
     padding: 12px 16px 4px;
     margin-bottom: 30px;
     .search-btn {
       margin-left: 10px;
     }
   }
  .message {
    margin: 20px 0;
    span {
      font-size: 14px;
      margin-right: 60px;
    }
  }
 }
 .shopInfo {
   background: #F5F5F5;
   padding: 15px 30px;
   .total-amount {
       height: 67px;
       display: flex;
       justify-content: flex-start;
       .item {
         width: 127px;
         height: 65px;
         display: flex;
         flex-direction: column;
         justify-content: space-around;
         margin-right: 60px;
         .pay-name {
           color: #666;
           font-size: 14px;

         }
         .pay-amount {
            color: #46a6ff;
            font-size: 16px;
            margin-left: -5px;
            font-weight: bolder;
         }
         .pay-percent {
           color: rgba(0, 0, 0, 0.4);
           font-size: 14px;
         }
       }
  }
  .message {

    margin-bottom: 20px;
    span {
      font-size: 14px;
      margin-right: 60px;
    }
  }
 }
 .table {
   margin-top: 20px;
 }
.title-con-pit>p{
  margin: 1em 0;
}
.title-con-pit{
  max-height:80vh ;
  max-width: 80vw;
  overflow-y: auto;
}
</style>
